<template>
    <div class="video-wrap container">
        <div class="filter shadow">
            <div
                class="title flex-center"
                @click="openFilter"
            >
                {{ currentCat }}
                <i class="iconfont niceiconfontyoujiantou-copy-copy-copy-copy"></i>
                <transition name="fade">
                    <div
                        class="filter-box shadow"
                        v-if="showFilter"
                    >
                        <ul>
                            <li
                                v-for="item of tags"
                                :key="item.id"
                                :class="currentCat == item.name ? 'active' : ''"
                                @click="chooseCat(item.id, item.name)"
                            >
                                {{ item.name }}
                            </li>
                        </ul>
                    </div>
                </transition>
            </div>
            <div class="hot-tag flex-row">
                <p>分类：</p>
                <ul class="flex-center">
                    <li
                        v-for="item of hotCategories"
                        :key="item.id"
                        :class="currentCat == item.name ? 'active' : ''"
                        @click="chooseCat(item.id, item.name)"
                    >
                        {{ item.name }}
                    </li>
                </ul>
            </div>
            <div
                class="all"
                :class="currentCat == '全部' ? 'active' : ''"
                @click="chooseCat('', '全部')"
            >
                全部
            </div>
        </div>
        <mv-list :mvs="videos"></mv-list>
        <!-- v-loading="fullscreenLoading" -->
        <div class="page flex-center">
            <button
                :disabled="offset == 0"
                class="btn flex-center trainsition"
                @click="prev"
            >
                上一页
            </button>
            <button
                :disabled="!hasmore"
                class="btn flex-center trainsition"
                @click="next"
            >
                下一页
            </button>
        </div>
    </div>
</template>

<script>
import { createVideo } from '@/model/video'
import MvList from '@/components/common/mvList/Index'
export default {
    data() {
        return {
            currentCat: '全部',
            currentId: '',
            hotCategories: [],
            tags: [],
            videos: [],
            offset: 0,
            hasmore: true,
            showFilter: false,
            // fullscreenLoading: false
        }
    },
    components: {
        MvList
    },
    created() {
        this.getVideoCategory()
        this.getVideoTag()
        this.getVideoAll()
    },
    methods: {
        // 展开视频标签
        openFilter() {
            this.showFilter = !this.showFilter
        },
        // 下一页
        next() {
            this.offset += 1
            if (this.currentId) {
                this.getVideoOther(this.currentId)
            } else {
                this.getVideoAll()
            }
        },
        // 上一页
        prev() {
            this.offset -= 1
            if (this.currentId) {
                this.getVideoOther(this.currentId)
            } else {
                this.getVideoAll()
            }
        },
        // 获取视频分类列表
        async getVideoCategory() {
            const { data: res } = await this.$api.getVideoCategory()
            if (res.code !== 200) {
                return this.message.error('获取视频分类列表失败！');
            }
            console.log(res);
            let list = res.data.filter(item => {
                return item.id !== 1000
            })
            this.hotCategories = list
        },
        // 获取视频标签列表
        async getVideoTag() {
            const { data: res } = await this.$api.getVideoTag()
            if (res.code !== 200) {
                return this.message.error('获取视频标签列表失败！');
            }
            let list = res.data.filter(item => {
                return item.id !== 1000

            })
            this.tags = list
        },
        // 获取全部视频列表
        async getVideoAll() {
            const { data: res } = await this.$api.getVideoAll(this.offset)
            // console.log(res);
            if (res.code !== 200) {
                return this.message.error('获取全部视频列表失败！');
            }
            this.videos = this._normalizeVideos(res.datas)
            this.fullscreenLoading = false
            if (res.hasmore) {
                this.hasmore = true
            } else {
                this.hasmore = false
            }
        },
        // 选择分类
        chooseCat(id, name) {
            this.offset = 0
            this.hasmore = true
            this.currentCat = name
            if (id) {
                this.currentId = id
                this.getVideoOther(id)
            } else {
                this.getVideoAll()
            }
        },
        // 获取视频标签/分类下的视频
        async getVideoOther(id) {
            const { data: res } = await this.$api.getVideoOther(id, this.offset)
            if (res.code === 200) {
                this.videos = this._normalizeVideos(res.datas)
                if (res.hasmore) {
                    this.hasmore = true
                } else {
                    this.hasmore = false
                }
            }
        },
        // 处理视频
        _normalizeVideos(list) {
            let ret = []
            list.map(item => {
                let res = item.data
                let liveRes = item.data.liveData
                if (res.vid) {
                    ret.push(
                        createVideo({
                            id: res.vid,
                            nickName: res.creator.nickname,
                            name: res.title,
                            playCount: res.playTime,
                            duration: res.durationms,
                            image: res.coverUrl,
                            isLive: false
                        })
                    )
                } else {
                    ret.push(
                        createVideo({
                            id: liveRes.liveRoom.liveRoomNo,
                            nickName: liveRes.liveUser.nickName,
                            name: liveRes.liveRoom.title,
                            playCount: liveRes.liveRoom.popularity,
                            duration:
                                liveRes.liveRoom.liveStatus == 1 ? '正在直播' : '直播已关闭',
                            image: liveRes.liveRoom.coverUrl,
                            isLive: true
                        })
                    )
                }
            })
            return ret
        },

    }

}
</script>
<style lang="less" scoped>
.video-wrap {
    .filter {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        padding-right: 20px;
        border-radius: 5px 0px 5px 5px;

        .title {
            width: auto;
            height: 100%;
            padding: 0 5px 0 15px;
            background: #fa2800;
            border-radius: 5px 0px 5px 5px;
            color: #ffffff;
            cursor: pointer;
            position: relative;
            margin-right: 15px;
            position: relative;

            &::after {
                content: "";
                width: 1px;
                height: 20px;
                margin-left: 12px;
                background: #e7e7e7;
                opacity: 0;
            }

            > i {
                transform: rotate(90deg);
                margin-left: 10px;
                font-size: 18px;
            }

            .filter-box {
                width: 720px;
                height: 400px;
                overflow-y: scroll;
                background: rgba(255, 255, 255, 1);
                border-radius: 5px;
                color: #000;
                position: absolute;
                right: -631px;
                top: 50px;
                z-index: 100;
                padding: 15px 10px 0 16px;

                ul {
                    display: flex;
                    flex-wrap: wrap;

                    li {
                        padding: 8px 18px;
                        background: #f7f7f7;
                        border-radius: 16px;
                        margin: 0 10px 10px 0;
                        cursor: pointer;
                        font-size: 12px;
                        color: #161e27;
                        transition: all 0.4s;

                        &:hover {
                            color: #fff;
                            background: #fa2800;
                        }

                        &.active {
                            color: #fff;
                            background: #fa2800;
                        }
                    }
                }
            }
        }

        .hot-tag {
            flex: 1;
            margin-top: -15px;
            ul {
                li {
                    margin: 0 5px;
                    padding-right: 10px;
                    cursor: pointer;

                    &:hover {
                        color: #888;
                    }

                    &.active {
                        color: #fa2800;
                    }
                }
            }
        }

        .all {
            background: #f7f7f7;
            color: #161e27;
            padding: 5px 10px;
            font-size: 12px;
            border-radius: 3px;
            transition: all 0.4s;
            cursor: pointer;

            &.active {
                background: #fa2800;
                color: #fff;
            }
        }
    }

    .page {
        .btn {
            padding: 7px 10px;
            border-radius: 3px;
            background: #fa2800;
            color: #ffffff;
            margin: 0 10px;
            cursor: pointer;
            border: 0;

            &.active {
                background: #fa2800;
                color: #ffffff;
            }

            &:hover {
                background: #fa2800;
                color: #ffffff;
            }

            &:disabled {
                color: #fff;
                background-color: #fab6b6;
                border-color: #fab6b6;
            }
        }
    }
}
</style>
